Chart.js একটি শক্তিশালী লাইব্রেরি যা বিভিন্ন ধরনের চার্ট তৈরি করতে সহায়ক। আজ আমরা দেখব কিভাবে Horizontal Bar Chart এবং Vertical Bar Chart তৈরি করা যায়। এই দুটি চার্ট বিভিন্ন ডেটা প্রদর্শনের জন্য উপকারী, এবং এগুলো bar টাইপের চার্টের মধ্যে পড়ে।
১. Vertical Bar Chart
Vertical Bar Chart হল সবচেয়ে সাধারণ ধরনের বার চার্ট যেখানে বারগুলো এক্স-অক্ষের সাথে মিলিয়ে দাঁড়িয়ে থাকে। এটি তুলনামূলক ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়।
Vertical Bar Chart উদাহরণ
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Bar Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Vertical Bar Chart Example</h1>
<canvas id="verticalBarChart" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
const ctx = document.getElementById('verticalBarChart').getContext('2d');
const verticalBarChart = new Chart(ctx, {
type: 'bar', // Bar chart type
data: {
labels: ['January', 'February', 'March', 'April', 'May'], // X-axis labels
datasets: [{
label: 'Sales', // Dataset label
data: [10, 25, 15, 30, 40], // Data for Y-axis
backgroundColor: 'rgba(75, 192, 192, 0.2)', // Bar color
borderColor: 'rgba(75, 192, 192, 1)', // Bar border color
borderWidth: 1
}]
},
options: {
responsive: true, // Make the chart responsive
scales: {
y: {
beginAtZero: true // Start the Y-axis at zero
}
}
}
});
বর্ণনা:
type: 'bar': এটি বারের চার্ট হিসেবে সেট করা হয়েছে।labels: X-axis এর জন্য মাসের নাম দেওয়া হয়েছে।data: Y-axis এর জন্য বিক্রয়ের ডেটা দেওয়া হয়েছে।backgroundColor: বারগুলির রং নির্ধারণ করা হয়েছে।borderColor: বারগুলির বর্ডারের রং নির্ধারণ করা হয়েছে।borderWidth: বর্ডারের প্রস্থ নির্ধারণ করা হয়েছে।
২. Horizontal Bar Chart
Horizontal Bar Chart হল একটি চার্ট যেখানে বারগুলো অনুভূমিকভাবে (Horizontal) প্রদর্শিত হয়। এটি কিছু বিশেষ ক্ষেত্রে তুলনামূলক ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়, বিশেষ করে যেখানে বিভাগগুলোর নাম অনেক বড় হয়।
Horizontal Bar Chart উদাহরণ
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Bar Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Horizontal Bar Chart Example</h1>
<canvas id="horizontalBarChart" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
const ctx = document.getElementById('horizontalBarChart').getContext('2d');
const horizontalBarChart = new Chart(ctx, {
type: 'bar', // Bar chart type
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], // Y-axis labels
datasets: [{
label: 'Votes', // Dataset label
data: [12, 19, 3, 5, 2], // Data for X-axis
backgroundColor: 'rgba(255, 99, 132, 0.2)', // Bar color
borderColor: 'rgba(255, 99, 132, 1)', // Bar border color
borderWidth: 1
}]
},
options: {
responsive: true, // Make the chart responsive
indexAxis: 'y', // Set axis to horizontal (y-axis will be the index axis)
scales: {
x: {
beginAtZero: true // Start the X-axis at zero
}
}
}
});
বর্ণনা:
type: 'bar': এটি বারের চার্ট হিসেবে সেট করা হয়েছে, কিন্তু এখানে আমরা এটি অনুভূমিকভাবে (horizontal) কনফিগার করেছি।indexAxis: 'y':yনির্ধারণ করলে চার্টটি অনুভূমিকভাবে (horizontal) প্রদর্শিত হবে, অর্থাৎ X-axis এবং Y-axis এর অবস্থান পাল্টে যাবে।labels: Y-axis এর জন্য ব্যাখ্যাগুলি দেওয়া হয়েছে।data: X-axis এর জন্য ডেটা নির্ধারণ করা হয়েছে।
সারাংশ
- Vertical Bar Chart: এটি সাধারণত ডেটার তুলনা করার জন্য ব্যবহৃত হয়, যেখানে বারগুলি উল্লম্বভাবে প্রদর্শিত হয়।
- Horizontal Bar Chart: এই চার্টটি তুলনামূলক ডেটা প্রদর্শনের জন্য ব্যবহার করা হয়, তবে বারগুলি অনুভূমিকভাবে (horizontal) প্রদর্শিত হয়।
উপরে দেওয়া উদাহরণগুলো Chart.js এর মাধ্যমে Vertical এবং Horizontal Bar Chart তৈরি করার প্রাথমিক পদক্ষেপগুলো দেখিয়েছে, যা সহজেই আপনার প্রজেক্টে ব্যবহার করা যাবে।
